<template>
  <div>
    <van-nav-bar>
      <template #title>
        <i class="title">发现</i>
      </template>
    </van-nav-bar>
    <van-search
  v-model="keyword"
  show-action
  placeholder="请输入搜索关键词"
  @search="onSearch"
>
  <template #action>
    <div @click="onSearch">搜索</div>
  </template>
</van-search>
    <section class="list" v-if="!noSearchShops">
      <ul class="list_container">
        <!--:to="'/shop?id='+item.id"-->
        <router-link
          :to="{ path: '/shop', query: { id: item.id } }"
          tag="li"
          v-for="item in searchShops"
          :key="item.id"
          class="list_li"
        >
          <section class="item_left">
            <img :src="imgBaseUrl + item.image_path" class="restaurant_img" />
          </section>
          <section class="item_right">
            <div class="item_right_text">
              <p>
                <span>{{ item.name }}</span>
              </p>
              <p>月售 {{ item.month_sales || item.recent_order_num }} 单</p>
              <p>
                {{
                  item.delivery_fee || item.float_minimum_order_amount
                }}
                元起送 / 距离{{ item.distance }}
              </p>
            </div>
          </section>
        </router-link>
      </ul>
    </section>

    <div class="search_none" v-else>很抱歉！无搜索结果</div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      keyword: '',
      imgBaseUrl: 'http://cangdu.org:8001/img/',
      noSearchShops: false
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    onSearch () {
      // 得到搜索关键字
      const keyword = this.keyword.trim()
      // 进行搜索
      if (keyword) {
        this.noSearchShops = false
        this.$store.dispatch('searchShops', keyword)
      }
    }
  },
  computed: {
    ...mapState(['searchShops'])
  },
  watch: {
    searchShops (value) {
      if (!value.length) { // 没有数据
        this.noSearchShops = true
      } else { // 有数据
        this.noSearchShops = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar {
  i {
    font-size: 18px;
    color: #fff;
  }
  .title {
    color: #fff;
    font-weight: 600;
    font-size: 20px;
  }
  .van-icon {
    color: #fff;
  }
  background-color: #1989fa;
}
.list {
  .list_container {
    background-color: #fff;
    .list_li {
      display: flex;
      justify-content: center;
      padding: 10px;
      border-bottom: 1px solid #D9D9F3;
      .item_left {
        margin-right: 10px;
        .restaurant_img {
          width: 50px;
          height: 50px;
          display: block;
        }
      }
      .item_right {
        font-size: 12px;
        flex: 1;
        .item_right_text {
          p {
            line-height: 12px;
            margin-bottom: 6px;
            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }
}
.search_none {
  margin: 0 auto;
  color: #333;
  background-color: #fff;
  text-align: center;
  margin-top: 0.125rem;
}
</style>
